<template>
  <transition name="left-slide">
    <div v-show="foodFlag"  class="food-detail">
      <div class="main" ref="food" >
        <div>
          <div class="image-wrapper">
            <img :src="food.image" alt="food.image">
            <div class="back-wrapper">
              <span @click="close" class="icon-arrow_lift"></span>
            </div>
          </div>
          <div class="food-info-wrapper">
            <div class="food-name">{{food.name}}</div>
            <div class="food-sell-rating"><span class="sellCount">月售{{food.sellCount}}份</span><span class="ratingRate">好评率{{food.rating}}%</span></div>
            <div class="food-price"><span class="nowPrice">￥{{food.price}}</span><span v-show="food.oldPrice" class="oldPrice">￥{{food.oldPrice}}</span></div>
            <div v-show="food.count>0" class="cartcontrol-wrapper">
              <cartcontrol :food="food"></cartcontrol>
            </div>
            <div v-show="!food.count"  class="first-wrapper">
              <span @click="addFirst" class="add-first">加入购物车</span>
            </div>
          </div>
          <divide></divide>
          <div class="info-wrapper">
            <span class="title">商家介绍</span>
            <p v-show="food.info" class="info">{{food.info}}</p>
          </div>
          <divide></divide>
          <div class="info-wrapper">
            <span class="title">商品评价</span>
            <div class="rating-type">
              <span @click="wholeFunc" class="whole" :class="{choose:wholeFlag}"><span  class="text">全部</span><span class="count">{{wholeCount}}</span></span>
              <span @click="recommendFunc" class="recommend" :class="{choose:recommendFlag}"><span class="text">推荐</span><span class="count">{{recommendCount}}</span></span>
              <span @click="complainFunc" class="complain" :class="{choose:complainFlag}"><span class="text">吐槽</span><span class="count">{{complainCount}}</span></span>
            </div>
            <div class="only-content">
              <span @click="onlyFunc" :class="{choose:onlyFlag}" class="icon icon-check_circle"></span>
              <span class="text">只看有内容的评价</span>
            </div>
            <div class="rating-wrapper">
              <ul>
                <li v-for="item in choosedContent">
                  <rating-content :rating="item"></rating-content>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
  import divide from '../divide/divide.vue'
  import cartcontrol from '../cartcontrol/cartcontrol.vue'
  import ratingContent from '../ratingContent/ratingContent.vue'
//  import IScroll from 'iscroll/build/iscroll-probe.js'
  import IScroll from 'iscroll'
  import Vue from 'vue'

  export  default{
    props:{
      food:{
        type: Object
      }
    },
    data() {
      return{
        foodFlag: false,
        wholeFlag:true,
        recommendFlag: false,
        complainFlag:false,
        onlyFlag: false,
        foodScroll:null
      }
    },
    computed: {
     choosedContent() {
        let arr = [];
        let result = [];
        if(this.wholeFlag && !this.onlyFlag){
          arr = this.food.ratings;
        }
        else if(this.wholeFlag && this.onlyFlag ){
          this.food.ratings.forEach( (rating) => {
            if (rating.text){
              arr.push(rating);
            }
          });
        }
       else if(this.recommendFlag && !this.onlyFlag){
          this.food.ratings.forEach( (rating) => {
            if (rating.rateType == 0){
              arr.push(rating);
            }
          });
        }
        else if(this.recommendFlag && this.onlyFlag){
          this.food.ratings.forEach( (rating) => {
            if (rating.rateType == 0 && rating.text){
              arr.push(rating);
            }
          });
        }
        else if(this.complainFlag && !this.onlyFlag){
          this.food.ratings.forEach( (rating) => {
            if (rating.rateType == 1){
              arr.push(rating);
            }
          });
        }
        else if(this.complainFlag && this.onlyFlag){
          this.food.ratings.forEach( (rating) => {
            if (rating.rateType == 1 && rating.text){
              arr.push(rating);
            }
          });
        }
       result = arr;
       arr=[];
        return result;
      },
      recommendCount() {
        let count = 0;
        if(this.food.ratings){
          this.food.ratings.forEach((rating) => {
            if (rating.rateType == 1){
              count ++;
            }
          });
        }
        return count;
      },
      complainCount() {
        let count = 0;
        if(this.food.ratings){
          this.food.ratings.forEach((rating) => {
            if (rating.rateType == 0){
              count ++;
            }
          });
        }
        return count;
      },
      wholeCount() {
        if(this.food.ratings){
          return this.food.ratings.length;
        }
        else{
          return 0;
        }
      }
    },
    methods:{
      close() {
        this.foodFlag = false;
      },
      show() {
        this.foodFlag = true;
        this.$nextTick(() => {
          if(!this.foodScroll){
            console.log('!this.scroll');
            this.foodScroll= new IScroll(this.$refs.food,{
              click:true
            });
          }
          else{
            console.log('this.scroll');
            this.foodScroll.refresh();
          }
        });
      },
      addFirst() {
        if( !this.food.count){
          Vue.set(this.food,'count',1);
        }
      },
      wholeFunc() {
        this.wholeFlag = true;
        this.recommendFlag = false;
        this.complainFlag = false;
        this.$nextTick(() => {
          if(this.foodScroll){
            this.foodScroll.refresh();
          }
        });
      },
      recommendFunc() {
        this.wholeFlag = false;
        this.recommendFlag = true;
        this.complainFlag = false;
        this.$nextTick(() => {
          if(this.foodScroll){
            this.foodScroll.refresh();
          }
        });
      },
      complainFunc() {
        this.wholeFlag = false;
        this.recommendFlag = false;
        this.complainFlag = true;
        this.$nextTick(() => {
          if(this.foodScroll){
            this.foodScroll.refresh();
          }
        });
      },
      onlyFunc(){
        this.onlyFlag = !this.onlyFlag;
        this.$nextTick(() => {
          if(this.foodScroll){
            this.foodScroll.refresh();
          }
        });
      }


    },
    components:{
      divide,
      cartcontrol,
      ratingContent
    }

  }
</script>

<style rel="stylesheet/scss" lang="scss">
  @import "../../common/mixin";
    .food-detail{
      position: fixed;
      top: 0;
      bottom: 48px;
      left: 0;
      width: 100%;
      /*max-height: 100%;*/
      /*height: 100%;*/
      background-color: #ffffff;
      .main{
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      .image-wrapper{
        position: relative;
        width: 100%;
        height: 0;
        padding-top: 100%;
        img{
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
      }
      .back-wrapper{
        position: absolute;
        left: 0;
        top: 15px;
        .icon-arrow_lift{
          display: inline-block;
          padding: 10px;
          font-size: 20px;
          color: #ffffff;
        }
      }
      .food-info-wrapper{
        position: relative;
        display: block;
        vertical-align: top;
        .food-name{
          font-size: 14px;
          color: rgb(7,17,27);
          line-height: 14px;
        }
        .food-desc{
          font-size: 10px;
          color: rgb(147,153,159);
          line-height: 10px;
          margin: 8px 0;
        }
        .food-sell-rating{
          font-size: 10px;
          color: rgb(147,153,159);
          line-height: 10px;
          .ratingRate{
            margin-left: 12px;
          }
        }
        .food-price{
          .nowPrice{
            font-size: 14px;
            line-height: 24px;
            color:rgb(240,20,20) ;
            font-weight: 700;
          }
          .oldPrice{
            font-size: 10px;
            color: rgb(147,153,159);
            font-weight: 700;
            line-height: 24px;
            text-decoration: line-through;
            margin-left: 8px;
          }
        }
        .cartcontrol-wrapper{
          position: absolute;
          right: 18px;
          bottom: 18px;
        }
        .first-wrapper{
          position: absolute;
          right: 18px;
          bottom: 18px;
          .add-first{
            font-size: 14px;
            display: inline-block;
            padding: 6px 12px;
            color: #ffffff;
            background-color: rgb(0,160,220);
            border-radius: 12px;
          }
        }
      }
      .food-info-wrapper{
        padding: 18px;
        .food-name{
          font-size: 14px;
          font-weight: 700;
          color: rgb(7,17,27);
          line-height: 14px;
          margin-bottom: 8px;
        }
        .food-price{
          margin-top: 10px;
        }
      }
      .info-wrapper{
        margin: 0 18px;
        padding: 18px 0;
        .title{
          display: inline-block;
          font-size: 16px;
          font-weight: 700;
          margin-bottom: 6px;
        }
        .info{
          font-size: 12px;
          line-height: 24px;
          font-weight: 200;
          color: rgb(77,85,93);
        }
      }
      .rating-type{
        padding-bottom: 18px;
        margin-top: 12px;
        @include border-1px(rgba(7,17,27,0.1));
        & > span{
          display: inline-block;
          margin-left: 8px;
          color: rgb(77,85,93);
          font-size: 12px;
          padding: 8px 12px;
          &:first-child{
            margin-left: 0;
          }
        }
        .whole , .recommend{
          background-color: rgba(0,160,220,0.2) ;
          &.choose{
            background-color: rgb(0,160,220) ;
            color: #ffffff;
          }
        }
        .complain{
          background-color: rgba(77,85,93,0.2);
          &.choose{
            background-color: rgb(77,85,93) ;
            color: #ffffff;
          }
        }
      }
      .only-content{
        padding: 12px 0;
        @include border-1px(rgba(7,17,27,0.1));
        .icon{
          font-size: 24px;
          color: rgb(147,153,159);
          line-height: 24px;
          &.choose{
            color: #00C850;
          }
        }
        .text{
          font-size: 12px;
          color: rgb(147,153,159);
          line-height: 25px;
          vertical-align: top;
        }
      }

    }
    .left-slide-enter{
      transform: translate3d(100%,0,0);
    }
    .left-slide-enter-active{
      transition: all 0.5s ease;
    }
    .left-slide-leave-active{
      transform: translate3d(100%,0,0);
      transition: all 0.5s ease;
    }
</style>
